<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="addCars"> 添加一些车辆 </a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '查看',
              onClick: handleQRCode.bind(null, record),
            },
          ]"
        />
      </template>
      <template #position="{ record }">
        <p>经度: {{ record.car.position.latitude }}</p>
        <p>纬度: {{ record.car.position.longitude }}</p>
      </template>
    </BasicTable>
    <BasicModal v-bind="$attrs" @register="registerModal">
      <div class="qrcode-pannel">
        <QrCode :value="showQRCodeID" ref="qrRef" :logo="LogoImg" />
        <a-button class="mb-2" type="primary" @click="download"> 下载 </a-button>
      </div>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index';
  import LogoImg from '/@/assets/images/logo.png';

  import { carsApi, createCarsApi } from '/@/api/car/car';
  import { CarStatusMap } from '/@/api/model/car';

  const columns: BasicColumn[] = [
    {
      title: 'ID',
      dataIndex: '_id',
      fixed: 'left',
      width: 280,
    },
    {
      title: '状态',
      dataIndex: 'car.status',
      width: 200,
      format: (text: string, _record: Recordable, _index: number) => {
        return CarStatusMap.get(parseInt(text)) as string;
      },
    },
    {
      title: '当前行程',
      dataIndex: 'car.tripid',
      width: 230,
    },
    {
      title: '车辆当前位置',
      dataIndex: 'position',
      width: 250,
      slots: { customRender: 'position' },
    },
  ];

  export default defineComponent({
    components: { BasicTable, TableAction, BasicModal, QrCode },
    setup() {
      const [registerTable, { reload }] = useTable({
        api: carsApi,
        columns: columns,
        bordered: true,
        actionColumn: {
          width: 160,
          title: '查看车辆二维码',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });
      const [registerModal, { openModal, setModalProps }] = useModal();
      let showQRCodeID = ref<string>('');

      function handleQRCode(record: Recordable<string>): void {
        showQRCodeID.value = record._id;
        setModalProps({
          title: '查看车辆二维码',
          canFullscreen: false,
          showCancelBtn: false,
          showOkBtn: false,
        });
        openModal(true);
      }
      const qrRef = ref<Nullable<QrCodeActionType>>(null);
      function download() {
        const qrEl = unref(qrRef);
        if (!qrEl) return;
        qrEl.download(`${showQRCodeID.value}.png`);
      }
      async function addCars(): Promise<void> {
        await createCarsApi();
        reload({
          page: 1,
        });
      }
      return {
        showQRCodeID,
        LogoImg,
        qrRef,
        registerTable,
        handleQRCode,
        registerModal,
        openModal,
        download,
        addCars,
      };
    },
  });
</script>
<style lang="less" scoped>
  .qrcode-pannel {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
